<template>
	<a-table :columns="columns" :data-source="tableData" :pagination="false"
		:scroll="{ x: '80%', y: TABLE_SCROLL_HEIGHT }" rowKey="id">
		<template #sex="{ text }">{{ $OPTIONS.SEX[text] }}</template>
		<template #status="{ record }">
			<div @click.stop="handleSwitch(record)" class="switch-box">
				<a-switch :checked="record.status == 1 ? true : false" />
			</div>
		</template>
		<template #operation="{ record }">
			<div class="operation">
				<!-- <a @click.stop="Onoperation('look', record)" class="look">查看</a> -->
				<a @click.stop="Onoperation('edit', record)" class="edit">编辑</a>
			</div>
		</template>
	</a-table>
</template>

<script lang="ts" setup>
	import { ref, computed } from "vue";
	import useGetTableScrollHeight from "@/utils/useGetTableScrollHeight";
	import cloneDeep from 'lodash/cloneDeep';
	import { saveadminStatus } from "@/api/orang";
	
	defineProps({
		tableData: {
			type: Array,
			default() {
				return [];
			},
		},
	});
	const EMITS = defineEmits(["operation"]);
	const TABLE_SCROLL_HEIGHT = useGetTableScrollHeight();
	
	const columns = [
		{ title: "员工账号", dataIndex: "account", ellipsis: true },
		{ title: "员工姓名", dataIndex: "realName", ellipsis: true, },
		{ title: "性别", dataIndex: "sex", ellipsis: true,slots: { customRender: "sex" } },
		{ title: "联系电话", dataIndex: "userName", ellipsis: true, },
		// { title: "职称", dataIndex: "phone", ellipsis: true, },
		{ title: "归属部门", dataIndex: "departmentName", ellipsis: true, },
		{ title: "状态", dataIndex: "status", ellipsis: true,slots: { customRender: "status" } },
		{ title: "操作", dataIndex: "operation", width: 300,align: "center", slots: { customRender: "operation" } },
	];
	
	const Onoperation = (index, row) => {
		EMITS("operation", index, row);
	};
	
	const handleSwitch = async (record: any) =>{ //改变状态(已选择状态下不可更改)
		let obj = cloneDeep(record);
		obj.status == 0 ? obj.status = 1 : obj.status = 0;
		const { id, status } = obj;
		const result = await saveadminStatus({ statusUpdateParam:{ id, status } });
		if (!result) return;
		if (record.status == 0){
			record.status = 1;
			message.success("状态已开启");
			return;
		}else{
			record.status = 0;
			message.success("状态已关闭");
			return;
		}
	};
	
	
</script>

<style>
</style>